<template>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="用户名" prop="UserName">
        <el-input v-model="ruleForm.UserName" />
      </el-form-item>

      <el-form-item label="性别" prop="Sex">
      <el-radio-group v-model="ruleForm.Sex">
        <el-radio value="男">男</el-radio>
        <el-radio value="女">女</el-radio>
      </el-radio-group>
    </el-form-item>

      <el-form-item label="电话" prop="Tel">
        <el-input v-model="ruleForm.Tel" />
      </el-form-item>


      <el-form-item label="登录姓名" prop="LoginName">
        <el-input v-model="ruleForm.LoginName" />
      </el-form-item>

      <el-form-item label="登录密码" prop="LoginPwd">
        <el-input v-model="ruleForm.LoginPwd" />
      </el-form-item>



    
      
      <el-form-item label="授权角色" prop="RoleIds">
        <el-checkbox-group v-model="ruleForm.RoleIds">
          <el-checkbox :value="item.RoleId" v-for="item in rbac" :key="item.RoleId" name="type" >{{item.RoleName}}</el-checkbox>
          
        </el-checkbox-group>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          保存
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref,onMounted } from 'vue'
  import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useRoute,useRouter } from 'vue-router'
const route=useRoute();
const router=useRouter();
  
  interface RuleForm {
    UserName: string
    Sex: string
    Tel: string
    LoginName: string
    LoginPwd: string
    RoleIds: []
  }
  
  const formSize = ref<ComponentSize>('default')
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive<RuleForm>({
    UserName: '',
    Sex: '',
    Tel: '',
    LoginName: '',
    LoginPwd: '',
    RoleIds: [],
  })
  
  const locationOptions = ['Home', 'Company', 'School']
  
  const rules = reactive<FormRules<RuleForm>>({
    UserName: [
      { required: true, message: '用户名', trigger: 'blur' },
      //{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    Sex: [
      {
        required: true,
        message: '性别必填',
        trigger: 'blur',
      },
    ],
    Tel: [
      {
        required: true,
        message: '电话必填',
        trigger: 'blur',
      },
    ],
    LoginName: [
      {
   
        required: true,
        message: '登录姓名必填',
        trigger: 'blur',
      },
    ],
    LoginPwd: [
      {
        required: true,
        message: '登录密码必填',
        trigger: 'blur',
      },
    ],
    RoleIds: [
      {

        required: true,
        message: '授权角色必选选中一项',
        trigger: 'change',
      },
    ],
   
  })
  
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('submit!',ruleForm)
        
        axios({
            url:'/api/RBAC/AddUserInfoAsync',
            method:'post',
            data:ruleForm
        }).then(res=>{
            console.log(res);
            if(res.data.code==200){
                ElMessage({
    message: '添加成功',
    type: 'success',
  })
  router.push('/rBACList')

            }else{
                ElMessage.error(res.data.msg)
            }
            
        })
        
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  
  const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
  }))

let rbac:any=ref([])

const rbacss=()=>{
    axios({
    url:'/api/RBAC/ListRoleinfo',
    method:'get',

}).then(res=>{
    console.log(res);
    rbac.value=res.data.data
})

}



  onMounted(()=>{
    rbacss()
  })
  </script>
  